<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<ng2-toasty [position]="'top-center'"></ng2-toasty>
<section class="content">
    <div class="row">
        <!-- context start -->
        <div class="col-md-12">
            <div [ngBusy]="loading"></div>
            <div class="card">
                <div class="card-title">
                    <a class="actions__item btn btn-primary btn-sm"
                        tooltip="{{ 'common.button.create.tip' | translate }}"
                       placement="bottom" (click)="startShowCreateAndUpdateModal()">
                        <i class="zmdi zmdi-plus"></i>
                        {{ 'common.button.create.title' | translate }}
                    </a>
                </div>
                <div class="card-body">
                    <tabset class="tab-container--amber" [justified]="true">
                        <tab *ngFor="let type of menuTypeOptions" heading="{{type.text}}" (select)="selectType(type)"
                            style="margin-top: 10px;">
                        </tab>
                    </tabset>
                    <table class="table mb-0 mr-center">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>{{ "common.name" | translate }}</th>
                                <th>{{ "common.code" | translate }}</th>
                                <th>{{ "common.description" | translate }}</th>
                                <th>{{ "common.activeStatus" | translate }}</th>
                                <th>{{ "common.method" | translate }}</th>
                                <th>{{ "common.createTime" | translate }}</th>
                                <th>{{ "common.updateTime" | translate }}</th>
                                <th>{{ "common.action.name" | translate }}</th>
                            </tr>
                        </thead>
                        <tbody *ngFor="let model of models">
                            <tr>
                                <th scope="row">{{model.id}}</th>
                                <td>{{model.name}}</td>
                                <td>{{model.code}}</td>
                                <td>{{model.description}}</td>
                                <td class="center">
                                    <a [tooltip]="model.active ? 'current status is actived' : 'current status is not actived'">
                                        <i [ngClass]="model.active ? 'zmdi zmdi-stop' : 'zmdi zmdi-play'"></i>
                                    </a>
                                </td>
                                <td>
                                    <span class="badge badge-info" *ngFor="let k of model.methods"
                                          style="margin-left: 3px; margin-top: 3px;"
                                        [tooltip]="k.description">{{k.name}}</span>
                                </td>
                                <td>{{model.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                                <td>{{model.updateTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                                <td>
                                    <a (click)="startShowCreateAndUpdateModal(model)">
                                        <i class="zmdi zmdi-edit"
                                            tooltip="{{ 'common.action.editItem' | translate }}"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="mr-center">
                <pagination *ngIf="models?.length && page" [(ngModel)]="currentPage" totalItems="{{page.totalElements}}"
                    [rotate]="true" [maxSize]="5"
                    (pageChanged)="pageChanged($event)" [boundaryLinks]="true">
                </pagination>
            </div>
        </div>
        <!-- context end -->
    </div>
</section>
<!-- create and update modal start -->
<div bsModal #createAndUpdateModal="bs-modal" class="modal fade" [config]="{ ignoreBackdropClick: true }">
    <div class="modal-dialog" style="width: 100%;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title pull-left">
                    {{ 'common.modal.title' | translate }}
                </h5>
            </div>
            <form #createAndUpdateForm="ngForm" (ngSubmit)="createAndUpdate()">
                <div class="modal-body">
                    <wizard navBarLayout="large-empty-symbols">
                        <!-- basic config -->
                        <wizard-step stepTitle="{{ 'page.system.menu.step.basic' | translate}}"
                            navigationSymbol="&#xf0b1;"
                            navigationSymbolFontFamily="FontAwesome">
                            <div style="margin-top: 10px;">
                                <div
                                    class="form-group form-group--centered"> {{ 'page.system.menu.label.title.name' | translate}}
                                    :
                                    <label class="custom-control">
                                        <input type="text" [(ngModel)]="param.name" name="name" #name="ngModel"
                                               class="form-control"
                                               required placeholder="{{ 'page.system.menu.input.placeholder.name' | translate}}"/>
                                        <i class="form-group__bar"></i>
                                    </label>
                                </div>
                                <div
                                    class="form-group form-group--centered">{{ 'page.system.menu.label.title.url' | translate}}
                                    :
                                    <label class="custom-control">
                                        <input type="text" [(ngModel)]="param.url" name="url" #url="ngModel"
                                               class="form-control"
                                               required placeholder="{{ 'page.system.menu.input.placeholder.url' | translate}}"/>
                                        <i class="form-group__bar"></i>
                                    </label>
                                </div>
                                <div
                                    class="form-group form-group--centered">{{ 'page.system.menu.label.title.tip' | translate}}
                                    :
                                    <label class="custom-control">
                                        <input type="text" [(ngModel)]="param.tips" name="tips" #tips="ngModel"
                                               class="form-control"
                                               required placeholder="{{ 'page.system.menu.input.placeholder.tip' | translate}}"/>
                                        <i class="form-group__bar"></i>
                                    </label>
                                </div>
                                <div class="form-group form-group--centered">
                                    {{ 'page.system.menu.label.title.description' | translate}}
                                    :
                                    <label class="custom-control">
                                        <input type="text" [(ngModel)]="param.description"
                                               name="description" #sorted="ngModel"
                                               class="form-control"
                                               required placeholder="{{ 'page.system.menu.input.placeholder.description' | translate}}"/>
                                        <i class="form-group__bar"></i>
                                    </label>
                                </div>
                            </div>
                            <div class="card-footer d-flex px-4 py-3">
                                <div class="mr-auto"></div>
                                <div class="ml-4">
                                    <a class="btn btn-info" [ngClass]="{'disabled': !param.name || !param.url}"
                                       nextStep>{{ "common.nextStep" | translate }}
                                    </a>
                                </div>
                            </div>
                        </wizard-step>
                        <!-- custom config -->
                        <wizard-step stepTitle="{{ 'page.system.menu.step.custom' | translate}}"
                            navigationSymbol="&#xf0b1;"
                            navigationSymbolFontFamily="FontAwesome">
                            <div class="card-block" style="margin-top: 10px;">
                                <div class="clearfix mt-2"></div>
                                <div class="form-group form-group--centered">
                                    {{ 'page.system.menu.label.title.icon' | translate}}
                                    :
                                    <label class="custom-control">
                                        <input type="text" [(ngModel)]="param.icon"
                                               name="icon" #icon="ngModel"  #popIcon="bs-popover"
                                               class="form-control" required
                                            placeholder="{{ 'page.system.menu.input.placeholder.icon' | translate}}" [popover]="popTemplate"
                                               triggers="click" placement="bottom"
                                            (click)="startIconPopover()"/>
                                        <i class="form-group__bar"></i>
                                        <i class="{{param.icon}}"></i>
                                    </label>
                                    <template #popTemplate>
                                        <div [ngBusy]="iconLoading"></div>
                                        <div class="row">
                                            <div class="col-sm-4" *ngFor="let icon of iconModels">
                                                <label class="custom-control custom-radio">
                                                    <input
                                                        type="radio"
                                                        name="iconRadio"  value="{{icon.id}}"
                                                        class="custom-control-input" (click)="radioChange(icon)">
                                                    <span class="custom-control-indicator"></span>
                                                    <span>
                                                        <i class="{{icon.code}}"></i>
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                        <!--<div align="right" style="margin-top: 15px;">-->
                                        <!--<button type="button"-->
                                        <!--class="btn btn-sm btn-outline-info" (click)="allot()">{{ 'common.determine' | translate }}</button>-->
                                        <!--</div>-->
                                    </template>
                                </div>
                                <div class="form-group form-group--centered">
                                    {{ 'page.system.menu.label.title.level' | translate}}
                                    :
                                    <label class="custom-control">
                                        <input type="text" [(ngModel)]="param.level" name="level" #level="ngModel"
                                               class="form-control" required
                                            placeholder="{{ 'page.system.menu.input.placeholder.level' | translate}}"/>
                                        <i class="form-group__bar"></i>
                                    </label>
                                </div>
                                <div class="form-group form-group--centered">
                                    {{ 'page.system.menu.label.title.sorted' | translate}}
                                    :
                                    <label class="custom-control">
                                        <input type="text" [(ngModel)]="param.sorted" name="sorted" #sorted="ngModel"
                                               class="form-control" required
                                            placeholder="{{ 'page.system.menu.input.placeholder.sorted' | translate}}"/>
                                        <i class="form-group__bar"></i>
                                    </label>
                                </div>
                                <div class="form-group form-group--centered">
                                    {{ 'common.newd' | translate}}:
                                    <label class="custom-control custom-radio">
                                        <input type="radio" [(ngModel)]="param.newd" name="newd" value="true"
                                               class="custom-control-input">
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description"> {{ 'common.yes' | translate}}</span>
                                    </label>
                                    <label class="custom-control custom-radio">
                                        <input type="radio" [(ngModel)]="param.newd" name="newd" value="false"
                                               checked="checked"
                                               class="custom-control-input">
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description"> {{ 'common.no' | translate}}:</span>
                                    </label>
                                </div>
                            </div>
                            <div class="card-footer d-flex px-4 py-3">
                                <div class="mr-auto">
                                    <a class="btn btn-secondary"
                                       previousStep>{{ "common.previousStep" | translate }}</a>
                                </div>
                                <div class="ml-4">
                                    <a class="btn btn-info" nextStep>{{ "common.nextStep" | translate }}</a>
                                </div>
                            </div>
                        </wizard-step>
                        <wizard-step stepTitle="{{ 'page.system.menu.step.comprehensive' | translate}}" (stepEnter)="initStepDataModels($event)"
                            navigationSymbol="&#xf085;"
                            navigationSymbolFontFamily="FontAwesome">
                            <div class="card-block mr-center" style="margin-top: 10px;">
                                <div class="form-group form-group--centered">
                                    <select2 #methodFields [data]="methodOptions" [options]="multipleOptions" [value]="value" (valueChanged)="methodChanged($event)"></select2>
                                </div>
                                <div class="form-group form-group--centered">
                                    <div class="select">
                                        <select (change)="menuTypeChange($event.target.value)" class="form-control">
                                            <option
                                                value=" 0  ">{{ 'page.system.menu.select.placeholder.type' | translate}}</option>
                                            <option *ngFor="let option of menuTypeOptions" value="{{option.id}}">{{option.text}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group form-group--centered">
                                    <div class="select">
                                        <select (change)="menuParentChange($event.target.value)" class="form-control">
                                            <option
                                                value="0">{{ 'page.system.menu.select.placeholder.parent' | translate}}</option>
                                            <option *ngFor="let option of menuParentOptions" value="{{option.id}}">{{option.text}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="card-footer d-flex px-4 py-3">
                                    <div class="mr-auto">
                                        <a class="btn btn-secondary"
                                           previousStep>{{ "common.previousStep" | translate }}</a>
                                    </div>
                                    <div class="ml-4">
                                        <button class="btn btn-info"
                                                type="submit">{{ "common.save" | translate }}</button>
                                    </div>
                                </div>
                            </div>
                        </wizard-step>
                    </wizard>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-link" (click)="createAndUpdateModal.hide()">{{ "common.close" | translate }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- create and update modal end -->
<!-- 图标弹出框结束 -->
